<template>
	<view>
		<!-- 页面 -->
		<view>
			<image :src="data.goods_detail" style="width: 100%;min-height: 300upx;" mode="widthFix"></image>
		</view>
		<!-- 右侧固定分享按钮 -->
		<view style="position: fixed;top: 660upx;right: 0;width: 120upx;height: 220upx;background-color: #007AFF;z-index: 9999;">
			<view @click="share">
				<image src="../../static/tab-home.png" style="width: 80upx;height: 80upx;"></image>
				<view>分享</view>
			</view>
		</view>
		<!-- 底部购买按钮 -->
		<view class="foot webkit">
			<view class="item" @tap="home">
				<image src="../../static/tab-home.png"></image>
				<text class="text">首页</text>
			</view>
			<view class="item" @click="cart">
				<image src="../../static/cart.png"></image>
				<text class="text">购物车</text>
				<!-- <uni-badge v-if="data.cartCount > 0 " :text="data.cartCount" type="danger"></uni-badge> -->
			</view>
			<view class="btn flex" @click="buygoods" data-type="0">加入购物车</view>
			<view class="btn flex buy" @click="buygoods" data-type="1">现在购买</view>
		</view>
		<!-- 分享组件 -->
		<share 
			ref="share" 
			:contentHeight="580"
			:shareList="shareList"
		></share>
	</view>
</template>

<script>
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				user_id:'',
				res:[],
				data:{},
				loaded: false,
				currentEpd: 1,
				shareList: [{
						type: 1,
						icon: '/static/temp/share_wechat.png',
						text: '微信好友'
					},
					{
						type: 2,
						icon: '/static/temp/share_moment.png',
						text: '朋友圈'
					},
					{
						type: 3,
						icon: '/static/temp/share_qq.png',
						text: 'QQ好友'
					},
					{
						type: 4,
						icon: '/static/temp/share_qqzone.png',
						text: 'QQ空间'
					}
				]
			};
		},
		onLoad(e){
			this.goods_id = e.orderid
			
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
				 this.user_id = res.data
				 this.setAjax()
				},
			 });
		},
		methods:{
			setAjax(){
				uni.request({
				    url: 'https://cx.mingmeijt.com/Api/Goods/goodsDetail',
						method: 'POST',
						data:{
							goods_id: this.goods_id
						},
				    success: (res) => {
							this.data = res.data.data
							this.data.goods_thumb_image = 'https://cx.mingmeijt.com' + this.data.goods_thumb_image
							this.data.goods_thumb = 'https://cx.mingmeijt.com' + this.data.goods_thumb
							this.data.goods_detail = 'https://cx.mingmeijt.com' + this.data.goods_detail
							// console.log(this.data);
						}
				});
			},
			home() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			cart() {
				uni.reLaunch({
					url: '../cart/cart'
				})
			},
			buygoods() {
				console.log('点击了购买或购物车按钮')
			},
			imageOnLoad(key,index){
				this.$set(this.data[key][index], 'loaded', 'loaded');
			},
			//分享
			share(){
				console.log(111)
				this.$refs.share.toggleMask();	
			},
			//收藏
			favorite(){
				this.data.favorite = !this.data.favorite;
			}
		},
		//处理遮罩层物理返回键
		onBackPress(){
			if(this.$refs.share.show){
				this.$refs.share.toggleMask();
				return true;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}

	.carousel {
		height: 200px;
		.image-wrapper{
			display: flex;
			justify-content: center;
			align-content: center;
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.scroll-view-wrapper{
		display:flex;
		align-items:center;
		height: 90upx;
		padding: 20upx 0 20upx 40upx;
		background: #fff;
	}
	.episode-panel {
		white-space: nowrap;
		width: 100%;
		view {
			display: inline-block;
			margin-right: 30upx;
			width: 56upx;
			font-size: $font-lg;
			color: $font-color-base;
			&.current{
				color: #07a7a7;
			}
		}
	}

	.info {
		display: flex;
		align-items: center;
		padding: 10upx 40upx;
		background: #fff;

		.title {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-lg + 4upx;
			color: $font-color-dark;

			text:last-child {
				font-size: $font-sm;
				color: $font-color-light;
				margin-top: 4upx;
				&.Skeleton{
					width:220upx;
				}
			}
		} 
		.yticon {
			font-size: 44upx;
			color: $font-color-base;
			margin: 0 10upx 0 30upx;
		}
	}

	.actions {
		padding: 10upx 28upx;
		background: #fff;

		.yticon {
			font-size: 46upx;
			color: $font-color-base;
			padding: 10upx 12upx;
			&.active{
				color: #ff4443;
			}
			&:nth-child(2) {
				font-size: 50upx;
			}
		}
	}

	.section-tit {
		font-size: $font-base+2upx;
		color: $font-color-dark;
		margin-bottom: 30upx;
		text-align:center;
	}

	.guess {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30upx 40upx 10upx;
		margin-top: 16upx;
		background: #fff;
	}

	.guess-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.guess-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		min-width: 40%;
		margin-right: 26upx;
		padding-bottom: 40upx;
	
		&:nth-child(2n) {
			margin-right: 0;
		}
	
		image {
			width: 100%;
			height: 200upx;
			border-radius: 10upx;
		}
	
		text {
			font-size: $font-sm;
			color: $font-color-light;
			&.Skeleton{
				width: 180upx;
				&.title{
					width: 140upx;
				}
			}
			&.title{
				font-size: $font-base+2upx;
				color: $font-color-dark;
				margin-top:16upx;
				margin-bottom: 8upx;
			}
		}
	}
	.evalution{
		display:flex;
		flex-direction:column;
		background: #fff;
		margin-top: 16upx;
		padding: 40upx 0;
	}

	.eva-item{
		display:flex;
		padding: 20upx 40upx;
		image{
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}
	}
	.eva-right{
		display:flex;
		flex-direction:column;
		flex: 1;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		position:relative;
		.zan-box{
			display:flex;
			align-items:base-line;
			position:absolute;
			top: 10upx;
			right: 10upx;
			.yticon{
				margin-left: 8upx; 
			}
		}
		.content{
			font-size: $font-base;
			color: #333;
			padding-top:20upx;
		}
	}
	
	.uni-list-cell:after{
		height: 0;
	}
		.spec{color:#000;line-height:50upx;background:#f7f7f7;display:inline-block;font-size:24upx;margin:16upx 20upx 0 0;padding:0 24upx;border-radius:5px;}.optionlist{padding:20upx;padding-top:8upx;border-top:1px solid #eee;}.option{height:auto;width:100%;padding-bottom:80upx;z-index:1001;}.topinfo{font-size:28upx;height:36upx;line-height:36upx;}.inner{background:#fff;border-top:1px solid #eee;box-shadow:0 0 4px rgba(0,0,0,0.1);}.goodsinfo{padding:20upx;padding-left:220upx;position:relative;}.goodsinfo .image{height:168upx;width:168upx;background:#fff;padding:4upx;border:2upx solid #eee;border-radius:4upx;position:absolute;top:-56upx;left:20upx;box-shadow:0 0 8upx rgba(0,0,0,0.1);}.uni-badge{position:absolute;top:3px;right:4px;color:#fff;background:#f00;}.part{width:100%;height:750upx;overflow:hidden;position:relative;}.banner-box{width:100%;height:750upx;}.banner-image{width:100%;height:100%;}.thumb.part{width:100%;height:750upx;border-bottom:20px solid #f9f9f9;overflow:hidden;position:relative;}.banner-box{width:100%;height:750upx;}.thumb{height:750upx;}.thumb image{width:750upx;height:750upx;}.tab{background:#fff;border-top:2upx solid #eaeaea;border-bottom:2upx solid #eaeaea;height:80upx;text-align:center}.tab .flex{line-height:80upx;color:#666;border-bottom:4upx solid transparent;margin-bottom:-2upx;}.tab .flex.active{color:#175e3c;border-color:#175e3c;}.info{padding:16upx 20upx;background:#fff;}.info .top .flex{height:80upx;line-height:40upx;}.info .top .right{width:70upx;text-align:center;margin-left:10upx;}.info .top .right image{display:block;width:34upx;height:34upx;margin:0 auto;}.info .top .right text{color:#f55;display:block;width:70upx;text-align:center;font-size:24upx;}.info .center .subtitle{font-size:26upx;color:#999;line-height:50upx;margin-bottom:10upx;}.info .center .price{color:#f00;display:inline-block;font-size:40upx;line-height:50upx;}.info .center .price .original{display:inline-block;font-size:24upx;color:#c0c0c0;margin-left:20upx;text-decoration:line-through;}.info .center .bl{color:#f00;line-height:56upx;}.info .bottom view{color:#666;font-size:26upx;}.kd{display:inline-block;}.jifen{margin-top:20upx;background:#fff;padding:20upx;margin-bottom:20upx;}.jifen .title{font-size:32upx;color:#000;text-align:center;}.jifen .subtitle{color:#9a9a9a;font-size:24upx;line-height:30upx;padding-top:8upx;text-align:center;}.jifen .list .term{float:left;margin-right:20upx;width:342upx;text-align:center;border:2upx solid #ffe8c8;border-radius:5px;padding:30upx 0;margin-right:2%;margin-top:20upx;list-style:none;color:#9f7a48;}.jifen .list .term:nth-child(2n){margin-right:0;}.jifen .list .term .symbol{display:inline-block;font-size:24upx;color:#9f7a48;}.jifen .list .term .num{display:inline-block;font-size:32upx;color:#9f7a48;}.jifen .list .term .coinname{display:inline-block;font-size:24upx;color:#fe9402;margin-left:10upx;}.segmented-control.text{margin:0;width:100%;background:#fff;}.city{font-size:30upx;padding:22upx 30upx;line-height:48upx;width:750upx;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background:#fff;margin-top:20upx;position:relative;}.city:after{font-family:uniicons;content:'\E583';position:absolute;right:12px;top:50%;color:#bbb;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.city .text{width:670upx;}.city .text view{display:inline;margin-left:12upx;}.params{padding:30upx 24upx 26upx;background:#fff;position:relative;}.params:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.tab .params view{line-height:28upx;font-size:26upx;border:0;margin:0;text-align:left;}.params .t{width:160upx;color:#999;}.params .v{padding-left:10upx;color:#666;}.tab .content{border-top:1px solid #eaeaea;}.foot{position:fixed;bottom:0;height:100upx;width:750upx;background:#fff;border-top:1px solid #eaeaea;}.foot .item{width:120upx;position:relative;}.foot .item image{width:40upx;height:40upx;display:block;margin:14upx auto 0;}.foot .item .text{display:block;text-align:center;font-size:22upx;color:#999;}.foot .btn{text-align:center;line-height:50px;color:#fff;background:#fe9402;}.foot .btn.buy{background:#fd5555;}.mask{position:fixed;background:rgba(0,0,0,0.8) none repeat scroll 0 0;width:100%;height:100%;left:0;opacity:0;top:0;z-index:1000;-moz-transition-duration:400ms;-webkit-transition-duration:400ms;transition-duration:400ms;}.mask.visible{opacity:1;}.modal{position:fixed;width:100%;z-index:1001;left:0;bottom:-80upx;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition-property:-webkit-transform;transition-property:transform;}.modal.in{-moz-transition-duration:300ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.city-picker .t{color:#333;font-size:0.75rem;padding:0.5rem 0.7rem;text-align:center;background:white;}.city-picker .g{background-color:#fff;line-height:1.4;font-size:0.8rem;overflow:hidden;position:relative;overflow-y:auto;max-height:485px;padding:12px;}.city-picker .g .cell view{font-style:normal;display:inline-block;border:1px solid #ebebeb;height:1.2rem;line-height:1.2rem;padding:0 0.5rem;margin:0 0.1rem 0.2rem 0;font-size:0.6rem;border-radius:0.15rem;}.city-picker button{background:#f55;border-radius:0;font-size:15px;height:45px;line-height:45px;}.city-picker button:after{border:0;}.mask{position:fixed;background:rgba(0,0,0,0.8) none repeat scroll 0 0;width:100%;height:100%;left:0;opacity:0;top:0;z-index:1000;-moz-transition-duration:400ms;-webkit-transition-duration:400ms;transition-duration:400ms;}.mask.active{opacity:1;}
</style>


